<template>
   <div class="message-area-container">
       <DataForm @submit="handleSubmit"/>
       <h3>
           {{title}}
           <span>{{subTitle}}</span>
        </h3>
        <DataList :list="list" />
        <div class="loading" >
            <div v-loading="isListLoading"></div>
        </div>
       
   </div>
</template>

<script>
import DataForm from "./DataForm.vue";
import DataList from "./DataList.vue";
export default {
 name:'MessageArea',
 components:{
     DataForm,
     DataList
 },
 props:{
    title:{ //标题
        type:String,
        default:""
    },
    subTitle:{ //副标题
        type:String,
        default:""
    },
    list:{ //评论列表
        type:Array,
        default:()=>[]
    },
    isListLoading:{
        type:Boolean,
        default:false
    }
 },
 methods:{
     handleSubmit(formData,callback){
         this.$emit('submit',formData,callback);
     }
 }
}
</script>

<style scoped lang="less">
.message-area-container{
    .loading{
        position:relative;
        height:100px;
        width:100%;
    }
}

</style>